<!--
 * @Author: Shber
 * @Date: 2024-07-01 15:49:30
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-12 10:08:17
 * @Description: 
-->
<template>

<view class="content">
  <uni-forms ref="baseForm" :label-width="100" :modelValue="form">
    <text class="form_title">基础信息</text>
    <view class="white_card">
      <uni-forms-item label="名称" required>
        <uni-easyinput :inputBorder="false" v-model="form.name" placeholder="建议命名形式为“品牌+品名+售卖规格”" />
      </uni-forms-item>
      <uni-forms-item label="店内分类" required>
        <view class="flex_label">
          <text class="uni-input-input">请选择分类</text>
          <uni-icons type="right" size="16" color="#333333"></uni-icons>
        </view>
      </uni-forms-item>
      <uni-forms-item label="商品简称">
        <uni-easyinput :inputBorder="false" v-model="form.age" placeholder="用于打印和麦芽田内部订单使用" />
      </uni-forms-item>
      <uni-forms-item label="商品类目" required>
        <view class="flex_label">
          <text class="uni-input-input">请选择商品类目</text>
          <uni-icons type="right" size="16" color="#333333"></uni-icons>
        </view>
      </uni-forms-item>
      <uni-forms-item label="商品图片" required>
        <myUpload/>
      </uni-forms-item>  
    </view>

    <text class="form_title must mt_10">售卖规格 <text class="sku_num">（共 3 个规格）</text></text>
    <view class="white_card">
      <view class="sku_item" v-for="item in 3">
        <skuItem/>
      </view>
      <tm-button icon="tmicon-plus" class="mt_20" size="small" :shadow="0" outlined block label="添加规格"></tm-button>
    </view>
  </uni-forms>
</view>


<!-- <m-tabbar :active="4"/> -->

</template>
<script setup>
  import { ref, reactive } from 'vue'
  import mTabbar from '@/components/Tabbar'
  import myIcon from '@/components/MyIcon/index.vue'
  import myUpload from '@/components/MyUpload/index.vue'
  import skuItem from './components/SkuItem.vue'

  const form = ref({

  })

  const confirm=()=>{
    uni.redirectTo({
      url: '/pages/login/index?id=1'
    });
  }
</script>
<style lang="scss" scoped>
.content{padding: 10px;}
.flex_label{display: flex; align-items: center; justify-content: space-between; height: 36px; line-height: 36px;}
.form_title{display: block; font-size: 16px; color: #333; margin-bottom: 8px;
  .sku_num{font-size: 12px; color: #666666;}
}
.must{
  &::before{ content: '*'; color: red; }
}
.sku_item{border-bottom: 1px solid #F5F5F5; }
.mt_20{margin-top: 20px !important;}
</style>